<template>
  <div>
    <!--筛选过滤-->
    <div>
      <el-form :model="filterData" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">下单日期:</div>
            <el-date-picker v-model="filterData.daterange" type="daterange" align="right" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">订单渠道:</div>
            <el-select v-model="filterData.platform" style="width: 100%;" placeholder="订单渠道" clearable filterable multiple>
              <el-option v-for="(item,index) in platforms" :label="item.label" :key="item.index" :value="item.label">
              </el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">外部单号:</div>
            <el-input placeholder="外部单号" v-model="filterData.ordercode" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">商品名称:</div>
            <el-input placeholder="商品名称" v-model="filterData.title" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">规格型号:</div>
            <el-input placeholder="规格型号" v-model="filterData.model" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">实际客户:</div>
            <el-autocomplete v-model="filterData.client" placeholder="实际客户" :fetch-suggestions="querySearchAsync"
              clearable style="width: 100%;"> </el-autocomplete>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">收货信息:</div>
            <el-input placeholder="收货信息:收货人,收货电话,收货地址" v-model="filterData.buyerinfo" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">客户企业:</div>
            <el-autocomplete v-model="filterData.clientname" placeholder="客户企业名称"  clearable :fetch-suggestions="querySearchClientnameAsync"
              style="width: 100%;"></el-autocomplete>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">业务员:</div>
            <el-select v-model="filterData.saleman" placeholder="业务员" clearable filterable style="width: 100%;">
              <el-option v-for="(item,index) in salemanlist" :label="item.name" :key="item.id"
                :value="item.name"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">合作商:</div>
            <el-select v-model="filterData.supname" style="width: 100%;" clearable placeholder="合作商名称" filterable>
              <el-option v-for="(item,index) in suppliers" :key="item.name" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">进项票号:</div>
            <el-input placeholder="进项发票号或数电票号" v-model="filterData.supticket_num" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">采购单号:</div>
            <el-input placeholder="采购单号" v-model="filterData.buyrecode" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">进项状态:</div>
            <el-select v-model="filterData.supticket_status" placeholder="进项状态" style="width: 100%;" clearable>
              <el-option label="待开具" value="0"></el-option>
              <el-option label="已开具" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">销项票号:</div>
            <el-input placeholder="销项发票号或数电票号" v-model="filterData.platformticketid" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">销项发票:</div>
            <el-select v-model="filterData.platformticket_status" placeholder="销项发票" style="width: 100%;" clearable>
              <el-option label="待开具" value="0"></el-option>
              <el-option label="已开具" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">客户发票:</div>
            <el-select v-model="filterData.clientticket" placeholder="客户发票" style="width: 100%;" clearable>
              <el-option label="待上传" value="0"></el-option>
              <el-option label="已上传" value="1"></el-option>
            </el-select>
          </el-col>


          <el-col style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">客户票号:</div>
            <el-input placeholder="客户发票号" v-model="filterData.clientticketnum" clearable></el-input>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">成本状态:</div>
              <el-select v-model="filterData.cost_bindstatus" placeholder="成本状态" style="width: 100%;" clearable>
                <el-option label="不完整" value="0"></el-option>
                <el-option label="已完整" value="1"></el-option>
                <el-option label="部分" value="2"></el-option>
              </el-select>
          </el-col>
          <el-col  style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">发货状态:</div>
              <el-select v-model="filterData.deliverstatus" placeholder="发货状态" clearable style="width: 100%;">
                <el-option label="待发货" value="0"></el-option>
                <el-option label="已发货" value="1"></el-option>
              </el-select>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem" >
            <div style="width: 80px;">收款状态:</div>
              <el-select v-model="filterData.incomes_status" placeholder="收款状态" style="width: 100%;" clearable>
                <el-option label="待收款" value="0"></el-option>
                <el-option label="已收款" value="1"></el-option>
              </el-select>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem"  v-if="false">
            <div style="width: 80px;">付款状态:</div>
              <el-select v-model="filterData.paid_tatus" placeholder="付款状态" style="width: 100%;" clearable>
                <el-option label="待付款" value="1"></el-option>
                <el-option label="已付款" value="2"></el-option>
              </el-select>
          </el-col>


          <el-col  style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">订单备注:</div>
              <el-input placeholder="订单备注" v-model="filterData.ordermemo" clearable></el-input>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 80px;">所属账套:</div>
            <el-select v-model="filterData.account" filterable placeholder="账套" style="width: 100%;" clearable>
              <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts"
                :key="index"></el-option>
            </el-select>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem">
            <div style="width: 90px;">已取消订单:</div>
            <el-checkbox v-model="filterData.containcancel">包含</el-checkbox>
          </el-col>

          <el-col  style="width: 280px;display: flex;" class="filteritem">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery"> 查询</el-button>
          </el-col>

        </el-row>
      </el-form>
    </div>



    <!--表单-->
    <div>
      <div style="height: 2px; border-bottom: 1px solid #E9E9E9; margin-bottom: 5px;"></div>
      <div style="text-align: right;margin:5px 0px 5px;">
      <el-popconfirm @confirm="handleExport();" :title="selection.length>0? '确定要导出选中项？ (共'+selection.length+'条）？':'确定要导出全部销售明细（共'+total+'条)？'">
          <el-button type="primary" slot="reference" size="mini" icon="el-icon-download" >
            {{selection.length>0? "导出选中项":"导出全部"}}
          </el-button>
      </el-popconfirm>

      <el-popover width="240" trigger="click">
          <el-checkbox-group v-model="columnSelected">
            <el-row :gutter="10">
              <el-col v-for="item in columnHeaders" :key="item.title" :span="12">
                <el-checkbox :label="item.title"></el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" type="primary" size="mini"
            style="margin-left: 2px;"></el-button>
        </el-popover>
      </div>
      <div class="table-wraper">
        <el-table :data="tableData" ref="tableData" border height="100%" :header-row-style="{height:'30px'}"
          :header-cell-style="{'background-color': '#f5f7f9','color':'#363636',border:'1px solid #e8e8e8'}"
          @selection-change="handleSelection">

          <el-table-column type="index" label="序号" align="center" fixed="left"></el-table-column>
          <el-table-column type="selection" align="center" fixed="left"></el-table-column>
          <el-table-column label="订单状态" align="center" prop="status" fixed="left">
            <template v-slot="scope">
              <span v-if="scope.row.status==0">正常</span>
              <span v-if="scope.row.status==1" style="color: #9f9f9f;">已取消</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderdate" label="下单日期" width="140px" sortable align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.orderdate}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.orderdate}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ouid" label="内部单号" v-if="columnHeaders[2].show" width="120px" align="center" sortable>
            <template v-slot="scope">
               <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.ouid}}</del></span>
               <span v-if="scope.row.status!=1">{{scope.row.ouid}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ordercode" label="外部单号" v-if="columnHeaders[2].show" width="170px" align="center" sortable>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.ordercode}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.ordercode}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="platform" label="渠道名称" width="130px" align="center" sortable>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.platform}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.platform}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sn" label="产品编码" v-if="columnHeaders[3].show" width="120px" align="center"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.sn}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称" v-if="columnHeaders[4].show" min-width="180px"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span >
                <i class="el-icon-link" title="打开上架链接" style="cursor: pointer;" @click="handleOpenLink(scope.$index,scope.row)"></i>
              </span>
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.title}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="规格型号" min-width="120px" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.model}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.model}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="计量单位" v-if="columnHeaders[5].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.unit}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" v-if="columnHeaders[6].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.count}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.count}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" v-if="columnHeaders[7].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.price}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="订单总额" v-if="columnHeaders[8].show" width="100px" align="center" >
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.total}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.total}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品备注" prop="memo" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="suptotal" label="应收总额" v-if="columnHeaders[9].show" width="100px" align="center"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.pttotal}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.pttotal}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="suptotal" label="应付总额" v-if="columnHeaders[9].show" width="90px" align="center"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #9f9f9f;"><del>{{scope.row.suptotal}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.suptotal}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="income_status" label="收款状态" align="center" width="90px">
            <template v-slot="scope">
              <span v-if="scope.row.income_status==0">待回款</span>
              <span v-if="scope.row.income_status==1">已回款</span>
            </template>
          </el-table-column>
          <el-table-column label="收货信息" align="center">
            <el-table-column label="收货人" width="95px" align="center" v-if="columnHeaders[10].show"
              show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.buyer}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo && scope.row.buyerinfo.buyer}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收货电话" width="120px" align="center" show-overflow-tooltip
              v-if="columnHeaders[11].show">
              <template v-slot="scope">
                <span v-if="scope.row.status==3"
                  style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.mobile}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo && scope.row.buyerinfo.mobile}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收货地址" width="100px" align="center" show-overflow-tooltip
              v-if="columnHeaders[11].show">
              <template v-slot="scope">
                <span v-if="scope.row.status==3"
                  style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.address}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo && scope.row.buyerinfo.address}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户单位" align="center" prop="clientname" show-overflow-tooltip></el-table-column>
          </el-table-column>
          <el-table-column label="业务员" align="center" show-overflow-tooltip prop="saleman"></el-table-column>
          <el-table-column label="发货状态" align="center" width="80">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleDeliver(scope.$index,scope.row)">
                <span v-if="scope.row.deliver.status==0" style="color: #F56C6C;">待发货</span>
                <span v-if="scope.row.deliver.status==1" style="color: #63A35C;">已发货</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="采购成本" align="center">
            <template slot="header">
              <div style="text-align: center;">采购成本</div>
            </template>
            <el-table-column label="成本状态" prop="bind_buystatus" align="center" width="80px">
              <template v-slot="scope" >
                <div style="cursor: pointer;" @click="handleShowBind(scope.$index,scope.row)">
                  <span v-if="scope.row.bind_buystatus==0" style="color: #F56C6C;">不完整</span>
                  <span v-if="scope.row.bind_buystatus==1" style="color: #67C23A;">完整</span>
                  <span v-if="scope.row.bind_buystatus==2" style="color: #">部分</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="成本总额" prop="bind_buysum" align="center" width="95px">
              <template v-slot="scope">
                {{scope.row.bind_buysum}}
              </template>
            </el-table-column>
            <el-table-column label="采购单号" prop="cost_bindreqcode" align="center" width="100px" show-overflow-tooltip>
              <template v-slot="scope">
                <span>{{scope.row.bind_buycodes}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="deliver_status" label="进项发票" width="90" align="center" v-if="columnHeaders[12].show">
            <el-table-column label="进项状态" align="center">
                <template v-slot="scope">
                  <div style="cursor: pointer;">
                    <span v-if="scope.row.supticket_status==0">待签收</span>
                    <span v-if="scope.row.supticket_status==1">已签收</span>
                   </div>
                </template>
            </el-table-column>
            <el-table-column label="进项发票号" show-overflow-tooltip prop="supticket_ids" align="left" width="120px"></el-table-column>
          </el-table-column>
          <el-table-column label="销项发票" align="center">
            <el-table-column label="销项状态" align="center">
                <template v-slot="scope">
                  <div style="cursor: pointer;">
                    <span v-if="scope.row.platformticket_status==0">待开具</span>
                    <span v-if="scope.row.platformticket_status==1">已开具</span>
                   </div>
                </template>
            </el-table-column>
            <el-table-column label="销项票号" show-overflow-tooltip prop="platformticket_ids" align="left" width="120px"></el-table-column>
          </el-table-column>
          <el-table-column label="客户发票" align="center">
            <el-table-column label="签收单" align="center">
                <template v-slot="scope">
                  <div style="cursor: pointer;">
                    <span v-if="scope.row.deliver_sign_template!=''">已上传</span>
                    <span v-if="scope.row.deliver_sign_template==''">/</span>
                   </div>
                </template>
            </el-table-column>
            <el-table-column label="客户发票" align="center">
                <template v-slot="scope">
                  <div style="cursor: pointer;">
                    <span v-if="scope.row.clientticket_attach!=''">已上传</span>
                    <span v-if="scope.row.clientticket_attach==''">/</span>
                   </div>
                </template>
            </el-table-column>
            <el-table-column label="客户发票号" show-overflow-tooltip prop="clientticket_fphm" align="center" width="120px"></el-table-column>
          </el-table-column>

          <el-table-column label="付款" width="80px" show-overflow-tooltip align="center" v-if="columnHeaders[13].show">
            <template v-slot="scope">
              <el-popover v-if="scope.row.deliver_status>=0" trigger="hover" effect="light" placement="top">
                <div>已付: {{scope.row.paidamount}}</div>
                <div slot="reference">
                  <span v-if="scope.row.paidstatus==0" style="color: #F56C6C;">未付款</span>
                  <span v-if="scope.row.paidstatus==1" style="color: #67C23A;">已付款</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="合作商" prop="supname" width="120px" show-overflow-tooltip></el-table-column>
          <el-table-column label="所属账套" prop="account" show-overflow-tooltip width="160px"
            align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="90px" fixed="right">
            <template v-slot="scope">
              <el-button-group>

                <el-button icon="el-icon-s-ticket" circle title="关联销项发票" type="danger"
                  @click="handleSaleTicketBinds(scope.$index,scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div style="display: flex;">
      <div style="flex: 1; line-height: 45px;">
        <span style="margin-right: 30px;">订单总额:{{parseFloat(sum_order).toFixed(2)}}</span>
        <span style="margin-right: 30px;">应收总额:{{parseFloat(sum_platform).toFixed(2)}} </span>
        <span style="margin-right: 30px;">成本总额:{{parseFloat(sumcost).toFixed(2)}}</span>
         <span style="margin-right: 30px;">选中数量:{{parseFloat(sumcount_selection).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中订单总额:{{parseFloat(sumamount_selection).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中应收总额:{{parseFloat(sumsup_selection).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中成本总额:{{parseFloat(sumcost_selection).toFixed(2)}}</span>
      </div>
      <div style="margin-top: 10px; text-align: right;">
        <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
          layout=" prev, pager, next,sizes,total" :page-sizes="[25, 50, 80]" :total="total" :page-size="pagesize"
          :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <BindCostUI v-if="bindcostVisible" ref="bindcostUI" @complete="handleCostComplete"></BindCostUI>
    <deliverUI v-if="deliverVisible" ref="deliverUI" @updated="handleUpdateDeliver"></deliverUI>
    <BindSaleTicketUI v-if="bindsaleticketVisible" ref="bindSaleTicketUI"></BindSaleTicketUI>
  </div>
</template>

<script>
  import qs from 'qs';
  import BindCostUI from './BindCostUI.vue';
  import deliverUI from './deliver.vue';
  import BindSaleTicketUI from './bindsaleticket.vue';

  export default {
    components: {
      BindCostUI,
      deliverUI,
      BindSaleTicketUI
    },
    watch: {
      columnSelected(newArrayVal) {
        this.columnHeaders.filter(item => {
          if (newArrayVal.indexOf(item.title) != -1) {
            item.show = true;
          } else {
            item.show = false;
          }
        })
        this.$nextTick(() => {
          this.$refs.tableData.doLayout()
        })

        localStorage.setItem(this.$route.name, JSON.stringify(newArrayVal));
      }
    },
    data() {
      return {
        platforms: [],
        salemanlist: [],
        columnSelected: ["下单时间", "类型", "外部单号", "产品编码", "商品名称", "计量单位", "数量", "单价", "订单额", "折扣额", "收货人", "收货地址", "进项",
          "付款", "备注"
        ],
        columnHeaders: [{
          "title": "下单时间",
          "show": true
        }, {
          "title": "类型",
          "show": true
        }, {
          "title": "子订单号",
          "show": true
        }, {
          "title": "京东编码",
          "show": true
        }, {
          "title": "商品名称",
          "show": true
        }, {
          "title": "计量单位",
          "show": true
        }, {
          "title": "数量",
          "show": true
        }, {
          "title": "单价",
          "show": true
        }, {
          "title": "订单额",
          "show": true
        }, {
          "title": "折扣额",
          "show": true
        }, {
          "title": "收货人",
          "show": true
        }, {
          "title": "收货地址",
          "show": true
        }, {
          "title": "进项",
          "show": true
        }, {
          "title": "付款",
          "show": true
        }, {
          "title": "备注",
          "show": true
        }],
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              var date = new Date()
              var year = date.getFullYear().toString()
              var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
                .toString()
              // var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
              var da = new Date(date.getFullYear(), month, 0).getDate()
              da < 10 ? '0' + da.toString() : da.toString()
              const end = year + '-' + month + '-' + da;
              const start = year + '-' + month + '-01';
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        filterData: {
            daterange: '',
            type: '',
            model:'',
            mordercode: '',
            ordercode: '',
            supid: '',
            subordercode: '',
            sticket_status: '',
            buyerinfo: '',
            platform: '',
            good: '',
            buyrecode:'',
            ordermemo: '',
            incomes_status: '',
            paid_tatus: '',
            supticket_status: '',
            platformticketid: '',
            supticket_num:'',
            supticketid: '',
            requestpay_status:'',
            commission_status: '',
            saleman: '',
            client: '',
            clientname: '',
            containcancel: true,
            cost_bindstatus: ''
        },
        selection:[],
        accounts: [],
        suppliers: [],
        platforms: [],
        tableData: [],
        //分页相关
        curpage: 1,
        pagesize: 25,
        total: 1,
        sum_order: 0,
        sum_platform: 0,
        sum_sup: 0,
        supsum: 0,
        sumcost: 0,
        sumcost_selection: 0,
        sumamount_selection: 0,
        sumcount_selection:0,
        sumsup_selection: 0,
        bindcostVisible: false,
        deliverVisible: false,
        bindsaleticketVisible: false,
      }
    },
    created() {
      var now= new Date();
      var firstDay=this.formatDate(new Date(now.getFullYear(),now.getMonth(),1));
      var lastDay=this.formatDate(new Date(now.getFullYear(),now.getMonth()+1,0));
      this.filterData.daterange = [firstDay,lastDay];

      if (localStorage.getItem(this.$route.name) == null) {
        localStorage.setItem(this.$route.name, JSON.stringify(this.columnSelected));
      } else {
        this.columnSelected = JSON.parse(localStorage.getItem(this.$route.name));
      }
      if(this.$route.query&& this.$route.query.deliverstatus!=''){
        this.filterData.deliverstatus=this.$route.query.deliverstatus;
      }
      this.loadPlatforms();
      this.loadDataList();
      this.loadSalemans();
      this.loadAccounts();
      this.loadSuppliers();
    },
    methods: {
      formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      },
      getCurrentDate(n) {
            var dd = new Date();
            if (n) {
              dd.setDate(dd.getDate() - n);
            }
            var year = dd.getFullYear();
            var month =
              dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
            var day = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
            return year + "-" + month + "-" + day;
          },
      handleOpenLink(index,row){
        const params={
          sn:row.sn
        }
        this.axios.post("api/admin/product/getguid_by_sn",params).then(res=>{
            if(row.platformtype.indexOf("企业")!=-1){
            }else if(row.platformtype.indexOf("政采云")!=-1){
               window.open("https://www.jc.zcygov.cn/items/"+row.sn,"_blank");

            }else if(row.platformtype.indexOf("京东")!=-1 ){
                window.open("https://item.jd.com/"+row.sn+".html","_blank");
            }else if(row.platformtype.indexOf("军网")!=-1){
               window.open("https://apigw.officemate.cn/newjdw/ecservice/selectMallProductInfo?sku="+res.data.guid,"_blank");
            }
        });
      },
      querySearchAsync(str, cb) {
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      //绑定销项发票明细
      handleSaleTicketBinds(index, data) {
        this.bindsaleticketVisible = true;
        this.$nextTick(() => {
          this.$refs.bindSaleTicketUI.dialogVisible = true;
          this.$refs.bindSaleTicketUI.init(index, JSON.parse(JSON.stringify(data)));
        })
      },
      querySearchClientnameAsync(str,cb){
        this.axios.post("api/admin/client/filter", {
          name: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      loadSuppliers() {
        this.axios.post("api/admin/supplier/list_item").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.suppliers = res.data.list;
          }
        })
      },
      loadAccounts() {
        this.axios.post("api/admin/account/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.accounts = res.data.list;
          }
        })
      },
      handleUpdateDeliver(index, data) {
        this.tableData[index].deliverstatus = data.status;
        this.tableData[index].deliver.status = data.num!=""?1:0;
        this.tableData[index].deliver.name = data.name;
        this.tableData[index].deliver.num = data.num;
        this.tableData[index].deliver.memo = data.memo
      },
      querySearchAsync(str, cb) {
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      handleQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      loadPlatforms: function() {
        this.axios.post("/api/admin/platform/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.platforms = res.data.platforms;
          }
        })
      },
      handleDeliver(index, row) {
        this.deliverVisible = true;
        this.$nextTick(() => {
          this.$refs.deliverUI.dialogVisible = true;
          this.$refs.deliverUI.init(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleSelection(selection) {
        this.selection = selection;

        this.sumamount_selection = 0;
        this.sumsup_selection = 0;
        this.sumcost_selection = 0;
        this.sumcount_selection=0;
        this.selection.forEach((item) => {
          this.sumamount_selection += parseFloat(item.total);
          this.sumsup_selection += parseFloat(item.suptotal);
          this.sumcost_selection += parseFloat(item.pttotal);
          this.sumcount_selection += parseFloat(item.count);
        })
      },
      loadSalemans() {
        this.axios.post("api/admin/mate/list_op").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.salemanlist = res.data.list;
          }
        })
      },
      handleShowBind(index, data) {
        this.bindcostVisible = true;
        this.$nextTick(() => {
          this.$refs.bindcostUI.dialogVisible = true;
          this.$refs.bindcostUI.initData(index, JSON.parse(JSON.stringify(data)));
        })
      },
      handleCostComplete(index, data) {
         this.tableData[index].bind_buyrmb = parseFloat(data.sum_rmb).toFixed(4);
        this.tableData[index].bind_buystatus= data.bind_buystatus;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          daterange: this.filterData.daterange,
          curpage: this.curpage,
          pagesize: this.pagesize,
          platform: this.filterData.platform,
          ordercode: this.filterData.ordercode,
          title: this.filterData.title,
          clientuser: this.filterData.client,
          buyerinfo: this.filterData.buyerinfo,
          model:this.filterData.model,
          buyrecode:this.filterData.buyrecode,
          clientname: this.filterData.clientname,
          saleman:this.filterData.saleman,
          supname: this.filterData.supname,
          supticket_num:this.filterData.supticket_num,
          supticket_status:this.filterData.supticket_status,
          sn: this.filterData.sn,
          paid_status: this.filterData.paid_status,
          platformticketid:this.filterData.platformticketid,
          platformticket_status:this.filterData.platformticket_status,
          containcancel: this.filterData.containcancel ? 1 : 0,
          cost_bindstatus: this.filterData.cost_bindstatus,
          requester: this.filterData.requester,
          incomes_status:this.filterData.incomes_status,
          deliverstatus:this.filterData.deliverstatus,
          account: this.filterData.account,
          reqcode: this.filterData.reqcode
        };
        this.axios.post("api/admin/orderdetail/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.total = res.data.numrows;
            this.sum_order = res.data.sum_order;
            this.sum_sup = res.data.sum_sup;
            this.sumcost = res.data.sum_cost;
          }
        })
      },
      handleExport() {
        var list=[];
        if(this.selection.length>0){
          list=this.selection;
          this.downloadExcel(list);
        }else{

          const params = {
            daterange: this.filterData.daterange,
            curpage: this.curpage,
            pagesize: this.pagesize,
            platform: this.filterData.platform,
            ordercode: this.filterData.ordercode,
            title: this.filterData.title,
            clientuser: this.filterData.client,
            buyerinfo: this.filterData.buyerinfo,
            clientname: this.filterData.clientname,
            saleman:this.filterData.saleman,
            supname: this.filterData.supname,
            supticket_num:this.filterData.supticket_num,
            supticket_status:this.filterData.supticket_status,
            sn: this.filterData.sn,
            paid_status: this.filterData.paid_status,
            incomes_status:this.filterData.incomes_status,
            containcancel: this.filterData.containcancel ? 1 : 0,
            cost_bindstatus: this.filterData.cost_bindstatus,
            deliverstatus:this.filterData.deliverstatus,
            requester: this.filterData.requester,
            account: this.filterData.account,
            reqcode: this.filterData.reqcode
          };
          this.axios.post("api/admin/orderdetail/export", params).then((res) => {
            if (res.status == 200 && res.data.code == 1) {
              list = res.data.list;
               this.downloadExcel(list);
            }
          });
        }
      },
      downloadExcel(list){
        //构建到处数据
          var index=1;
          let slist=list.map((item)=>{
             let obj={
               "序号":index,
               "下单日期":item.orderdate,
               "内部单号":item.ouid,
               "外部单号":item.ordercode,
               "渠道名称":item.platform,
               "产品编码":item.sn,
               "产品名称":item.title,
               "品牌":item.brand,
               "规格型号":item.model,
               "单位":item.unit,
               "数量":item.count,
               "订单单价":item.price,
               "订单总额":item.total,
               "商品备注":item.dmemo,
               "折扣单价":item.ptprice,
               "渠道总额":item.pttotal,
               "收款状态":item.income_status==1? "已回款":"待回款",
               "收货人":item.buyerinfo.buyer,
               "收货电话":item.buyerinfo.mobile,
               "收货地址":item.buyerinfo.address,
               "客户单位":item.clientname,
               "实际客户":item.client,
               "发货状态":item.deliver.status==0?"待发货":"已发货",
               "物流名称":item.deliver.name,
               "物流单号":item.deliver.num,
               "发货备注":item.deliver.memo,
               "订单备注":item.memo,
               "所属账套":item.account,
             }
             index++;
             return obj;
           });
          let ws= XLSX.utils.json_to_sheet(slist,{skipHeader:false});
           ws["!cols"]=[{wpx:80}];
           let wb=XLSX.utils.book_new();
           XLSX.utils.book_append_sheet(wb,ws,'销售订单明细表');
           XLSX.writeFile(wb,"销售订单明细表"+this.CurrentDateTime()+".xlsx");
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 320px);
  }

  .filteritem {
    line-height: 35px;
  }
</style>
